import { memo } from "react"
import styled from "@emotion/styled"

const ButtonIcon = styled.img`
    width: 100%;
    width: 100%;
    border-radius: 50%;
`
const SvgWrapper = styled.div`
    width: 100%;
    height: 100%;
    border-radius: 50%;
`

interface Props {
    icon: React.ReactNode | string | null
}

const RenderIcon = (props: Props) => {
    const { icon } = props
    if (typeof icon === "string") {
        return <ButtonIcon src={icon} />
    }
    if (typeof icon === "object" && icon !== null) {
        return <SvgWrapper>{icon as React.ReactElement}</SvgWrapper>
    }
    return null
}

export default memo(RenderIcon)
